<template>
	<div>
		<el-table ref="foodTable" :data="foods" stripe border height="500" :row-class-name="checkedFood"
		 highlight-current-row @selection-change="setIds" @current-change="getdata">
			<el-table-column prop="" label="坑的鸡食品大全">

				<el-table-column type="expand">
					<template slot-scope="scope">
						<el-form>
						<el-form-item label="食品编号:">
							<span>{{scope.row.id}}</span>
						</el-form-item>
						<el-form-item label="食品名称:">
							<span>{{scope.row.name}}</span>
						</el-form-item>
						<el-form-item label="食品描述:">
							<span>{{scope.row.memo}}</span>
						</el-form-item>
						<el-form-item label="食品原价:">
							<span>{{scope.row.price}}</span>
						</el-form-item>
						<el-form-item label="食品促销价:">
							<span>{{scope.row.hprice}}</span>
						</el-form-item>
						<el-form-item label="食品分类:">
							<span>{{scope.row.category.name}}</span>
						</el-form-item>
					</el-form>
					</template>
					</el-table-column>

					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column fixed="left" prop="name" label="食品名称" width="180">
						<template slot-scope="scope">
							<el-popover trigger="hover" placement="top">
								<p>原价格:¥ {{scope.row.price}}</p>
								<p>促销价格:¥ {{scope.row.hprice}}</p>
								<div slot="reference">
									{{scope.row.name}}
								</div>
							</el-popover>
						</template>
					</el-table-column>
					<el-table-column prop="memo" label="食品描述" width="180"></el-table-column>
					<el-table-column prop="category.name" :filters="[{text:'炸鸡类',value:'炸鸡类'},{text:'汉堡类',value:'汉堡类'},{text:'饮品类',value:'饮品类'}]"
					 :filter-method="filterData" label="食品分类" width="200"></el-table-column>
					<el-table-column prop="price" sortable label="原价格" width="200"></el-table-column>
					<el-table-column prop="hprice" sortable label="实际价格" width="200"></el-table-column>

					<el-table-column fixed="right" prop="" label="操作" width="200">
						<template slot-scope="scope">
							<el-button type="text">查看详情</el-button>
							<el-button type="text">删除</el-button>
						</template>
					</el-table-column>
				</el-table-column>
		</el-table>
		<el-button type="success" @click="getCurrRow(foods[2])">选中第3行</el-button>
		<el-button type="success" @click="clearFilter">重置筛选</el-button>
	<!--标签-->
	<el-tag v-for="(item,index) in comment" 
	 closable 
	:disable-transitions="false" 
	type="success"
	 @close="delTag(index)"
	 @click="appendTag(item)"
	 class="pointer">
      {{item}}
	</el-tag>
	<el-input
	 v-if="visibleInput"
	 v-model="inputValue"
	 class="input"
	 ref="tagInput"
	 @blur="pushTag"
	 @keyup.enter.native="pushTag"
	  />
	<el-button  v-else @click="changeTag()">+NEW Tag</el-button>
	<el-input v-model="strTag"></el-input>
	
	
	</div>
	
	
	
	
	
</template>

<script>
	export default {
		data() {
			return {
				foods: [{
					id: 0,
					name: "鸡腿汉堡",
					memo: "很美味的",
					price: 15,
					hprice: 10,
					category: {
						id: 0,
						name: "汉堡类"
					}
				}, {
					id: 1,
					name: "允指原味鸡",
					memo: "色香味俱全",
					price: 10,
					hprice: 8,
					category: {
						id: 1,
						name: "炸鸡类"
					}
				}, {
					id: 2,
					name: "可口可乐",
					memo: "第二杯半价",
					price: 7,
					hprice: 1,
					category: {
						id: 2,
						name: "饮品类"
					}
				}, {
					id: 0,
					name: "鸡腿汉堡",
					memo: "很美味的",
					price: 15,
					hprice: 10,
					category: {
						id: 0,
						name: "汉堡类"
					}
				}, {
					id: 1,
					name: "允指原味鸡",
					memo: "色香味俱全",
					price: 10,
					hprice: 8,
					category: {
						id: 1,
						name: "炸鸡类"
					}
				}, {
					id: 2,
					name: "可口可乐",
					memo: "第二杯半价",
					price: 7,
					hprice: 1,
					category: {
						id: 2,
						name: "饮品类"
					}
				}, {
					id: 0,
					name: "鸡腿汉堡",
					memo: "很美味的",
					price: 15,
					hprice: 10,
					category: {
						id: 0,
						name: "汉堡类"
					}
				}, {
					id: 1,
					name: "允指原味鸡",
					memo: "色香味俱全",
					price: 10,
					hprice: 8,
					category: {
						id: 1,
						name: "炸鸡类"
					}
				}, {
					id: 2,
					name: "可口可乐",
					memo: "第二杯半价",
					price: 7,
					hprice: 1,
					category: {
						id: 2,
						name: "饮品类"
					}
				}],
				currRow: null,
				ids: [],
				comment:["不要辣",'中辣','不要香菜'],
			    strTag:"",
				visibleInput:false,
				inputValue:""
			}
		},
		components: {

		},
		methods: {
			checkedFood({
				row,
				rowIndex
			}) {

				if (row.category.name == "饮品类") {
					return "red";
				}
				return "";
			},
			getdata(value) {
				this.currRow = value
			},
			getCurrRow(index) {
				this.$refs.foodTable.setCurrentRow(index);
			},
			setIds(value) {
				console.log(value);
				this.ids = value

			},
			filterData(value, row, column) {
				return row.category.name === value;
			},
			clearFilter() {
				//清空所有筛选过滤器
				this.$refs.foodTable.clearFilter();
			},
			delTag(index){
				this.comment.splice(index,1);
			},
			appendTag(item){
				this.strTag+=item+",";
			},
			changeTag(){
				this.visibleInput=!this.visibleInput;
			//使input获得焦点
			   this.$nextTick(()=>{
				   this.$refs.tagInput.$refs.input.focus();
			   })
			},
			pushTag(){
				let value=this.inputValue;
			   if(!value==''){
				   this.comment.push(value);
			   }
			   this.visibleInput=false;
			   this.inputValue="";
			}

		}
	}
</script>

<style>
	.el-table .red {
		background: oldlace;
	}
	.pointer{
		cursor: pointer;
	}
	
.input {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }	
</style>
